<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>cat:{{ cat}}</p>
    <button @click="cat.color = 'pink'">修改cat的颜色</button>
    <button @click="cat = {name:'胖胖',color:'yellow'}">换一个cat</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "AboutView",
});
</script>

<script setup lang="ts">
  import {reactive,ref} from "vue";
  const person = ref({name:"xiaoxia" ,age:19})
  console.log(person);

  let a = ref([1,2,3]);
  a.value.push(4);
  const cat = ref({name:"哈哈",color:"green"})
  // const cat = reactive({ name: "xiaoming", color: "yellow" });
  /*
  reactive对象不能被替换，否则没有响应式
  但是ref对象是响应式对象，我们替换了ref对象中保存的值，仍然拥有响应式

 */

  
</script>